import { Divider } from "antd";
import HomePage_TableComponent from "../../../../component/table";
import { useEffect, useState } from "react";
import HomePage_ModalComponent from "../../../../component/modal";
import HomePage_DebuggingAndTestingPage_PortableDeviceAccessPage_AddModalComponent from "./component/addModal";
import HomePage_ModalComponent_EditMainTransformerOrLineModalComponent from "../../../../component/modal/component/editMainTransformerOrLineModal";
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../../../common/utils";

// 主页-调试测试页面-便携设备接入页面
const HomePage_DebuggingAndTestingPage_PortableDeviceAccessPage: React.FC = () => {
    const columnList = [
        {
            title: '序号',
            width: 60,
            render: (text: string, record: object, idx: number) => idx + 1,
        },
        {
            title: '设备ID',
            minWidth: 70,
            dataIndex: 'tags',
            render: (text: string) => text ?? "-"
        },
        {
            title: '通信地址',
            minWidth: 85,
            dataIndex: 'tags',
            render: (text: string) => text ?? "-"
        },
        {
            title: '巡回中心',
            minWidth: 85,
            dataIndex: 'age',
            render: (text: string) => text ?? "-"
        },
        {
            title: '安装站点',
            minWidth: 85,
            dataIndex: 'address',
            render: (text: string) => text ?? "-"
        },

        {
            title: '监测对象',
            minWidth: 85,
            dataIndex: 'tags',
            render: (text: string) => text ?? "-"
        },

        {
            title: '操作',
            align: "right",
            width: 110,
            fixed: "right",
            render: (text: string, record: object, idx: number) => <>
                <span className="homePage-tableOperationBtn" onClick={() => click_edit(record)}>编辑</span>
                <Divider className="homePage-tableOperationDivider" type="vertical" />
                <span className="homePage-tableOperationBtn">删除</span>
            </>
        },

    ];
    const [isEditModal, setIsEditModal] = useState<boolean>(false)
    const [isAddModal, setIsAddModal] = useState<boolean>(false)
    const [type, setType] = useState<string>("")
    const [modalData, setModalData] = useState<object>({})
    const click_edit = (data: object) => {
        setModalData(data)
        setIsEditModal(true)
    }
    // 广播函数数据
    const eventBusFuncData = {
        // 头部操作新增
        headerOperationAdd: (data) => {
            setIsAddModal(true)
        }
    }
    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])
    return (
        < >
            <HomePage_TableComponent name="homePageDebuggingAndTestingPagePortableDeviceAccessPageTable" columnList={columnList} alignRightList={["操作"]} sourceData={{ list: [{ address: 5555, age: 88888888 }, {}, {}] }} />
            {/* {
                isEditModal && <HomePage_ModalComponent width={640} change_cancel={setIsEditModal} contentComponent={<HomePage_ModalComponent_EditMainTransformerOrLineModalComponent type={type} modalData={modalData} change_cancel={setIsEditModal} />} />
            } */}
            {
                isAddModal && <HomePage_ModalComponent width={640} change_cancel={setIsAddModal} contentComponent={<HomePage_DebuggingAndTestingPage_PortableDeviceAccessPage_AddModalComponent modalData={modalData} change_cancel={setIsAddModal} />} />
            }
        </>
    )
}
export default HomePage_DebuggingAndTestingPage_PortableDeviceAccessPage